import { defineComponent, reactive, ref } from "vue";
import Popup from "@/components/Popup/Popup";
import styles from "./Add.module.less";
import to from "await-to-js";
import _ from "lodash";
import { message } from "ant-design-vue";
import { $upload } from "@/apis/common/upload/upload";
import { LoadingOutlined, UploadOutlined, FileOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ["change"],
  setup(props, { emit, expose }) {
    const addPopupRef = ref(null as any);
    const formRef = ref(null as any);
    const state = reactive({
      type: "add",
      form: {
        id: null,
        versionName: null,
        versionCode: null,
        file: null,
        sort: 0,
        status: 0,
        remark: null,
        platform: 0,
      },
      file_loading: false,
    })
    const editing = ref(false);
    // 获取详情
    const getDetail = async () => {
      const [err, res]: any = await to(props.service?.detail(state.form.id));
      if (!err) {
        const resultObj = res?.data?.data;
        state.form.versionName = resultObj?.versionName || null;
        state.form.versionCode = resultObj?.versionCode || null;
        state.form.file = resultObj?.file || null;
        state.form.remark = resultObj?.remark || null;
        state.form.sort = resultObj?.sort || 0;
        state.form.status = resultObj?.status || 0;
        state.form.platform = resultObj?.platform || 0;
      }
    }
    // 打开弹窗
    const open = async ({ type, id }) => {
      state.type = type;
      state.form.id = id;
      if (type === 'edit') {
        await getDetail();
      }
      addPopupRef.value.open();
    }
    const submit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          editing.value = true;
          const params = _.cloneDeep(state.form);
          const [err, res]: any = await to((state.type === 'edit' ? props.service?.edit : props.service?.add)(params));
          if (!err) {
            message.success(state.type === 'edit' ? '编辑成功' : '添加成功');
            addPopupRef.value.close();
            emit('change');
          }
          editing.value = false;
        })
    }
    const beforeUploadFile = async (file) => {
      state.file_loading = true;
      const formData = new FormData();
      formData.append("file", file);
      const [err, res]: any = await to($upload(formData));
      if (err) {
        state.form.file = null;
        state.file_loading = false;
        return false;
      }
      state.form.file = res.data?.data?.ossUpload?.fileUrl || null;
      state.file_loading = false;
      return false;
    }
    expose({
      open,
    })
    return () => (
      <Popup ref={addPopupRef}
        title={state.type === 'edit' ? "编辑apk版本" : "添加apk版本"}
        width="800px"
        oriState={state}
        v-slots={{
          footer: () => <>
            <a-button type="primary" loading={editing.value} onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { addPopupRef.value.close() }}>取消</a-button>
          </>
        }}
      >
        <div class={styles.container}>
          <div class={styles.formBox}>
            <a-form style={{ width: "100%" }} ref={formRef} model={state.form} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 28 }}>
              <a-form-item required label="设备" name="platform">
                <a-select v-model:value={state.form.platform}>
                  <a-select-option value={0}>Pad</a-select-option>
                  <a-select-option value={1}>Phone</a-select-option>
                  <a-select-option value={2}>Panel</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item required label="版本名" name="versionName">
                <a-input v-model:value={state.form.versionName} placeholder="请输入版本名" />
              </a-form-item>
              <a-form-item required label="版本号" name="versionCode">
                <a-input-number v-model:value={state.form.versionCode} placeholder="请输入版本号" />
              </a-form-item>
              <a-form-item required label="apk文件" name="file">
                <a-upload show-upload-list={false} before-upload={beforeUploadFile}>
                  <a-button>
                    {state.file_loading ? <LoadingOutlined /> : <UploadOutlined />}
                    上传文件
                  </a-button>
                </a-upload>
                <div class={styles.file}>
                  <FileOutlined />
                  <span class={styles.fileNameBox}>
                    {state.form.file ? <span class={styles.fileName}>{state.form.file}</span> : <span class={styles.noFile}>暂未上传</span>}
                  </span>
                </div>
              </a-form-item>
              <a-form-item label="排序" name="sort">
                <a-input-number min={0} v-model:value={state.form.sort} placeholder="请输入排序" />
              </a-form-item>
              {
                state.type === 'edit' && <a-form-item label="是否启用" name="status">
                  <a-radio-group
                    v-model:value={state.form.status}
                    name="radioGroup"
                  >
                    <a-radio value={0}>启用</a-radio>
                    <a-radio value={1}>停用</a-radio>
                  </a-radio-group>
                </a-form-item>
              }
              <a-form-item label="备注" name="remark">
                <a-textarea v-model:value={state.form.remark} placeholder="请输入备注" />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </Popup>
    )
  }
})